<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">添加记录</small>
      </a>
      <a href="javascript:;" class="save">
        <button @click="submitForm()" type="primary">保存</button>
      </a>
    </header>
    <main>
      <div class="formcontent">
        <ul>
          <li>
            <span><em>*</em>食品类型</span>
            <div class="froms">
              <el-radio-group v-model="DemandWarehouse.radio2" size="mini">
                <el-radio :label="0">预包装食品</el-radio>
                <el-radio :label="1">散装加工食品</el-radio>
              </el-radio-group>
            </div>
          </li>
         
          <li>
            <span><em></em>食品名称</span>
            <div class="froms">
              <input type="button" class="text_l" @click="DemandWarehousehandleClick" v-model="DemandWarehouse.Name">
            </div>
            <mt-popup v-model="DemandWarehouseNamepup" position="right" modal=false class="mint-popup-3">
               <mt-foodname v-on:listenToChildEvent="foodClick" v-on:listencloseclick="clickmodl"></mt-foodname>
            </mt-popup>
          </li>
          <li>
            <span><em>*</em>食品类别</span>
            <div class="froms">
              <el-select v-model="DemandWarehouse.Foodtype" placeholder="请选择食品类别" name="Foodtype" v-validate="'required'" :class="{'is-danger': errors.has('Foodtype')}">
                <el-option v-for="item in DemandType" :key="item.unid" :value="item.id" :label="item.name">
                </el-option>
              </el-select>
            </div>
          </li>
            <li v-if="DemandWarehouse.radio2 ===1">
            <span><em>*</em>生产商</span>
            <div class="froms">
              <input type="text" v-model="DemandWarehouse.Producers" name="Producers" v-validate="'required'" :class="{'is-danger': errors.has('Producers')}">
            </div>
          </li>
          <li v-if="DemandWarehouse.radio2 ===1">
            <span><em>*</em>品牌</span>
            <div class="froms">
              <input type="text" v-model="DemandWarehouse.Brand" name="Brand" v-validate="'required'" :class="{'is-danger': errors.has('Brand')}">
            </div>
          </li>
          <li v-if="DemandWarehouse.radio2 ===1">
            <span><em>*</em>规格净含量</span>
            <div class="froms">
              <input type="text" v-model="DemandWarehouse.Norms" name="Norms" v-validate="'required'" :class="{'is-danger': errors.has('Norms')}">
            </div>
          </li>
          <li>
            <span>生产日期批号</span>
            <div class="froms">
              <el-input placeholder="请选择日期" icon="date" :disabled="true" v-model="DemandWarehouse.dataValue" @click="openPicker()">
              </el-input>
              <mt-datetime-picker ref="picker" type="date" year-format="{value}年" month-format="{value} 月" date-format="{value} 日" v-model="pickerValue" @cancel="handleCancel" @confirm="handleConfirm"></mt-datetime-picker>
            </div>
          </li>
           
           <li v-loading='loading'>
            <span>保质期</span>
            <div class="froms">
              <el-select v-model="IsShelfLife" value-key="unid" @change="IsShelfLifechange(IsShelfLife)">
                <el-option v-for="item in ShelfLife" :key="item.name" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </div>
          </li>
          <li>
            <span>有效期限</span>
            <div class="froms">
              <el-input placeholder="请选择日期" icon="date" :disabled="true" v-model="DemandWarehouse.DeadlineDate" @click="openPickerDeadlineDate()">
              </el-input>
              <mt-datetime-picker ref="picker3" type="date" year-format="{value}年" month-format="{value} 月" date-format="{value} 日" v-model="pickerValueDeadlineDate" @cancel="handleCancelDeadlineDate" @confirm="handleConfirmDeadlineDate"></mt-datetime-picker>
            </div>
          </li>
          <li>
            <span><em>*</em>供应商</span>
            <div class="froms">
              <el-select v-model="DemandWarehouseSupplier" placeholder="请选择" name="DemandWarehouseSupplier" v-validate="'required'" :class="{'is-danger': errors.has('DemandWarehouseSupplier')}">
                <el-option v-for="item in Supplierlist" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>
          </li>
          <li>
            <span><em>*</em>进库数量</span>
            <div class="froms">
              <input type="text" v-model="DemandWarehouse.Num"  name="Num" v-validate="'required'" :class="{'is-danger': errors.has('Num')}">
            </div>
          </li>
          <li>
            <span><em>*</em>数量单位</span>
            <div class="froms">
              <el-select v-model="DemandWarehouse.Unit" placeholder="请选择">
                <el-option
                  v-for="item in Unit"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </li>
          <li>
            <span>进货日期</span>
            <div class="froms">
              <el-input placeholder="请选择日期" icon="date" :disabled="true" v-model="DemandWarehouse.dataValue2" @click="openPickerStockDate()">
              </el-input>
              <mt-datetime-picker ref="picker2" type="date" year-format="{value}年" month-format="{value} 月" date-format="{value} 日" v-model="pickerValueStockDate" @cancel="handleCancelStockDate" @confirm="handleConfirmStockDate"></mt-datetime-picker>
            </div>
          </li>
          <li>
            <span><em>*</em>验证人</span>
            <div class="froms">
               <el-select v-model="EnterprisePersonselect" placeholder="请选择" name="DemandWarehouseSupplier" v-validate="'required'" :class="{'is-danger': errors.has('DemandWarehouseSupplier')}">
                <el-option v-for="item in EnterprisePerson" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>
          </li>
          <li>
            <span><em>*</em>是否索要发票</span>
            <div class="froms">
            <el-select v-model="IsTicket">
                <el-option v-for="item in IsTicketitems" :key="item.id" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </li>
        </ul>
      
      </div>
  
    </main>
  </div>
</template>
<script>
  import {
    DemandTypeBind,
    DemandWarehouseData,
    EnterprisePersonDataBind,
    ShelfLife,
    DemandCertificateAdd //食品类别,根据传入的条件获取原料数据列表//进货记录添加
  } from '../../api/api';
  import Foodname from '@/components/foodname'
  import {
    GetGuid
  } from '../../api/api';
  import {
    CEKeep
  } from '../../api/api'; //供应商
  import {
    DatetimePicker
  } from 'mint-ui';
  import {
    Popup
  } from 'mint-ui';
  var moment = require('moment');
  export default {
    name: 'add_mrcj',
    components: {
      'mt-datetime-picker':DatetimePicker,
      'mt-popup':Popup,
      'mt-foodname':Foodname
    },
    data() {
      return {
          loading: true,
        Unit: [  
            {label:'公斤',value:0},  
            {label:'瓶',value:1},
            {label:'袋',value:2},  
            {label:'罐',value:3},  
            {label:'个',value:4},
            {label:'盒',value:5},  
            {label:'箱',value:6},  
            {label:'包',value:7},
            {label:'桶',value:8}        
        ],  
        EnterprisePerson:[],
        EnterprisePersonselect:'',
        ShelfLife:'',
        IsShelfLife:'',
         IsTicketitems: [{
          value: '0',
          label: '否'
        }, {
          value: '1',
          label: '是'
        }],
        IsTicket:'',
        popupVisible: false,
        DemandWarehouseNamepup: false,
        DemandType: [],
        pickerValue: moment().format('YYYY-MM-DD'),
        pickerValueStockDate: moment().format('YYYY-MM-DD'),
        pickerValueDeadlineDate: moment().format('YYYY-MM-DD'),
        startDate: new Date(),
        CriteriaList: [],
        Supplierlist: [], //供应商
        DemandWarehouseSupplier: '',
        //表单
        DemandWarehouse: {
          radio2: 0,
          Foodtype: '',
          Name: '请选择食品名称',
          Brand: '',
          Foodunid: '',
          Norms: '',
          Num: '',
          Producers: '',
          Unit: '',
          RecordPersonName: JSON.parse(localStorage.getItem('auth')).enterpriseName,
          dataValue: '',
          dataValue2: '',
          DeadlineDate: '',
          datatime: this.datatime(),
        },
        msg: '请选择食品名称',
        isShow: true,
        isActive: false,
        seachtext: '',
      };
    },
      watch: {
        ShelfLife(val) {
            if (val) {
                this.loading = false;
            }
        },
    },
    methods: {
      IsShelfLifechange:function(IsShelfLife){
        debugger
        let _this = this
        var IsShelftime=IsShelfLife.name.split("");
        var interval=IsShelftime[IsShelftime.length-1];
        var number=IsShelfLife.num
        var date=this.DemandWarehouse.dataValue
          switch(interval)  
        {  
                case   "年"   :   {  
                        var days=moment(date).add(number,'y').format('YYYY-MM-DD');
                        this.DemandWarehouse.DeadlineDate=days
                     
                }  
                case   "月"   :   {  
                        var days=moment(date).add(number,'months').format('YYYY-MM-DD');
                        this.DemandWarehouse.DeadlineDate=days
                        break;  
                }  
                case   "天"   :   {  
                        var days=moment(date).add(number,'d').format('YYYY-MM-DD');
                        this.DemandWarehouse.DeadlineDate=days
                        break;  
                }  
                default:   {  
                        break;  
                }  
        }
          return this.DemandWarehouse.DeadlineDate;  
      },
      //人员
       EnterprisePersonDataBind: function() {
          let option = {
          params: {
            enterpriseUnid: JSON.parse(localStorage.getItem('auth')).enterpriseUnid
          }
        }
        EnterprisePersonDataBind(option).then((res) => {
          if (res.success === true) {
            this.EnterprisePerson= res.data
          }
        })
      },
      //有效期限
       Expiration: function() {
        ShelfLife().then((res) => {
          if (res.success === true) {
            this.ShelfLife = res.data
            console.log( this.ShelfLife)
          }
        })
      },
      //原料类别
      DemandTypeunid: function() {
        let DemandTypeunid = {
          params: {
            enterpriseUnid: JSON.parse(localStorage.getItem('auth')).enterpriseUnid
          }
        }
        DemandTypeBind(DemandTypeunid).then((res) => {
          if (res.success === true) {
            this.DemandType = res.data
          }
        })
      },
      //获取当前时间
      datatime: function() {
        var moment = require('moment');
        var currentdate = moment().format('YYYY-MM-DD hh:mm:ss');
        return currentdate;
      },
      //生产日期时间
      openPicker() {
        this.$refs.picker.open();
      },
      handleCancel() {
        let _this = this
        _this.pickerValue = _this.DemandWarehouse.dataValue

      },
      handleConfirm(val) {
        let _this = this
        _this.DemandWarehouse.dataValue = moment(val).format('YYYY-MM-DD')
      },
      //进货日期
      openPickerStockDate() {
        this.$refs.picker2.open();
      },
      handleCancelStockDate() {
        let _this = this
        _this.pickerValueStockDate = _this.DemandWarehouse.dataValue2
      },
      handleConfirmStockDate(val) {
        let _this = this
        _this.DemandWarehouse.dataValue2 = moment(val).format('YYYY-MM-DD')
      },
      //有效日期
      openPickerDeadlineDate() {
        this.$refs.picker3.open();
      },
      handleCancelDeadlineDate() {
        let _this = this
        _this.pickerValueDeadlineDate = _this.DemandWarehouse.DeadlineDate
      },
      handleConfirmDeadlineDate(val) {
        let _this = this
        _this.DemandWarehouse.DeadlineDate = moment(val).format('YYYY-MM-DD')
      },
      //原料选择开始了~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      DemandWarehousehandleClick: function() {
        this.DemandWarehouseNamepup = true
      },
      clickmodl: function() {
        this.DemandWarehouseNamepup = false
      },
      //获取item
      foodClick: function(foodcontent) {
        this.institutionPersonname =foodcontent.name;
        this.institutionPersonunid =foodcontent.unid;
        this.clickmodl();
        this.DemandWarehouse.Name = this.institutionPersonname
        this.DemandWarehouse.Foodtype=this.institutionPersonunid
      },
      //食品名称结束了~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      //获取供应商开始了~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      Supplier: function() {
        let CEKeepunid = {
          params: {
            enterpriseUnid: JSON.parse(localStorage.getItem('auth')).enterpriseUnid
          }
        }
        CEKeep(CEKeepunid).then((res) => {
          if (res.success === true) {
            this.Supplierlist = res.data
          }
        })
      },
      //获取供应商结束了~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      //提交方法
      submitForm: function() {
        this.$validator.validateAll().then((result) => {
          if (result) {
            let varDemandWarehouse = {
                Name: this.DemandWarehouse.Name,
                DemandType: {
                Unid: this.DemandWarehouse.Foodtype,
               },
               Producers: this.DemandWarehouse.Producers,
               Brand: this.DemandWarehouse.Brand,
               Norms: this.DemandWarehouse.Norms,
            }
            let varSupper = {
              Unid: this.DemandWarehouseSupplier,
              //  SupplierName:this.DemandWarehouseSupplier.label
            }
            let varShelfLife={
              Unid:this.IsShelfLife.unid
            }
            let varEnterprisePerson = {
              Unid:this.EnterprisePersonselect,
            }
            let data = {
              Type: this.DemandWarehouse.radio2,
              StockDate: this.DemandWarehouse.dataValue2,
              DemandWarehouse: varDemandWarehouse,
             
              ProductionDate: this.DemandWarehouse.dataValue,
              ShelfLife:varShelfLife,
              DeadlineDate: this.DemandWarehouse.DeadlineDate,
              Num: this.DemandWarehouse.Num,
              Unit: this.DemandWarehouse.Unit,
              Supplier: varSupper,
              IsTicket:this.IsTicket,
              EnterprisePerson:varEnterprisePerson,
              EnterpriseUnid: JSON.parse(localStorage.getItem('auth')).enterpriseUnid,
            }
            
            let dataoption = {
              params: {
                data: JSON.stringify(data),
                UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
              }
            }
            //调取接口
            DemandCertificateAdd(dataoption).then((res) => {
              if (res.success === true) {
                this.$message.success('保存成功');
                this.$router.go(-1);
              } else {
                this.$message.error(res.msg);
              }
            }).catch(function() {
              this.$message.error('网络异常。');
            })
          } else {
            this.$message.error('带*号为必填项，请确认填写格式正确');
            
          }
        })
      }
    },
    mounted() {
      this.Expiration();
      this.DemandTypeunid();
      this.Supplier();
      this.EnterprisePersonDataBind();
    }
  
  }
</script>

<style lang="scss">
  .uploadbox {
    position: relative;
    margin: 20px 0px;
    padding-left: 10px
  }
  
  .img-btnbox {
    position: absolute;
    right: 10px;
    top: -5px;
    width: 25px;
    height: 25px;
    overflow: hidden;
  }
  
  .showclick {
    position: relative;
    cursor: pointer;
    color: #888;
    background: url("../../img/add.png") no-repeat;
    background-size: contain;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    input {
      opacity: 0;
      filter: alpha(opacity=0);
      cursor: pointer;
      width: 100%;
      height: 100%;
    }
  }
  
  .el-radio__label {
    margin-top: 2px;
  }
  
  .disabled {
    display: none !important
  }
  
  .el-message {
    width: 85%;
    margin: 20px auto;
  }
  
  //重构
  .items-text {
    p {
      margin: 0em !important;
      padding: 0em !important;
      line-height: 20px;
    }
  }
</style>
